<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频详情</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_2384888_ojge9md3tr.css
    ">
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="../css/online.css">
</head>

<body>
    <!-- 导航菜单 -->
    <nav>
        <div class="main">
            <img src="../img/public/logo.png" alt="" class="logo">
            <ul>
                <li><a href="../index.html">首页</a></li>
                <li class="check"><a href="javascript:;">同步课程</a></li>
                <li><a href="javascript:;">精品课程</a></li>
            </ul>
            <div class="search">
                <div class="left">课程<i class="iconfont icon-down"></i>
                </div>
                <input type="text" placeholder="搜索感兴趣的内容" id="keyWord">
                <img src="../img/public/search.png" alt="" id="searchByKeyword">
            </div>
            <div class="login" id="login">
                <a href="loginAndRegister/login.html">登陆</a> /
                <a href="loginAndRegister/register.html">注册</a>
            </div>
            <div class="user" id="user_list" style="display: inline-block !important">
                <img src="../img/login/user.png" alt="" id="userimg">
                <div class="userlist" id="ulist">
                    <ul id="userlist">
                        <li>我是用户名</li>
                        <li id="coursesCenter">课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li class="person">个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div>
            <!-- <div class="login" id="login">
                <a href="javascript:;">登陆</a> /
                <a href="javascript:;">注册</a>
            </div>
            <div class="user" id="user_list">
                <img src="../img/login/user.png" alt="" id="userimg">
                <div class="userlist">
                    <ul>
                        <li>我是用户名</li>
                        <li>课程中心</li>
                        <li>订单中心</li>
                        <li>资金管理</li>
                        <li>个人中心</li>
                        <li class="out">退出登陆</li>
                    </ul>
                </div>
            </div> -->
        </div>
    </nav>

    <!-- 主体内容 -->
    <main>
        <div class="search_keyword">搜索到 <span></span> 关键字共<span></span> 条，共<span></span>页</div>
        <div class="lesson">
            <ul id="kecheng"></ul>
            <!-- <li>
                    <div class="top">
                        <img src="../img/online/banner1-1.png" alt="" class="m">
                        <p>学科：英语</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>人教版语文第一节课程内容讲解</span>
                            <span class="time">地区：北京</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li>
                <li>
                    <div class="top">
                        <img src="../img/online/banner1-1.png" alt="" class="m">
                        <p>学科：英语</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>人教版语文第一节课程内容讲解</span>
                            <span class="time">地区：北京</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> -->
            </ul>
        </div>

        <div class="pageNum">
            <!-- <button id="prevPage">上一页</button> -->
            <ul id="pageList">
                <!-- <li class="active">1</li>
                <li>2</li>
                <li>3</li> -->
            </ul>
            <!-- <button class="active" id="nextPage">下一页</button> -->
        </div>
    </main>
    <style>
        .search_keyword {
            font-size: 16px;
        }
        
        .search_keyword span {
            color: red;
        }
    </style>
    <footer>
        <div class="cont">
            <div class="main">
                <p>
                    首页 | 关于我们 | 加入我们 | 合作专区 | 联系我们 | AI开放平台 | 意见反馈 | 漏洞提交 | 隐私政策 | 版权声明 | 反盗链声明 | 网上有害信息举报 | 备案公示 | 营业执照 | 教师资格证公示

                </p>
                <p>
                    京ICP备 13030888号 Copyright © 2014-2019 行者信息科技（北京）有限公司 | 地址：北京市新华区马当路388号C座 | 电话：010-66666666 | 京公网安备 01010102002533号
                </p>
                <p>
                    京网文〔2018〕4086-308号 | 网络文化经营许可证：沪网文[2018]4086-308号 | 增值电信业务经营许可证：京B2-20150021 | 食品经营许可证：JY13101140088888
                </p>
                <p>医疗器械经营许可证：京嘉食药监械经营许20188008号 | 互联网药品信息服务资格证书：(京)-经营性-2018-0011 |</p>
            </div>
        </div>
    </footer>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="../utils/http.js"></script>



    <script>
        let mid = localStorage.getItem('mid')
            //获取用户头像信息
        async function getUserIcon() {
            let {
                err,
                result
            } = await myAjax({
                url: '/api/user',
                data: {
                    mid
                }
            })
            console.log(result.result.head_photo_url);

            let userInfo = result.result
                //头像赋值
            $('#userimg').attr('src', userInfo.head_photo_url);
        }
        getUserIcon();

        // 登录后隐藏登录注册样式 显示用户头像的样式
        let isLogin = localStorage.getItem('token');
        console.log(isLogin);
        console.log(isLogin == undefined);

        if (isLogin == undefined) { //未登录状态 显示登录注册按钮
            $('#login a').css('display', 'inline-block !important');
            $('#userimg').css('display', 'none');
        } else { //登录状态  显示头像
            $('#login').css('display', 'none');
            $('#userimg').css('display', 'inline-block !important');
        }

        // 退出登录的方法
        $('.out').on('click', function() {
            localStorage.removeItem('mid');
            localStorage.removeItem('token');
            location.reload();
            location.href = './loginAndRegister/login.html';
        });

        //跳转到个人中心
        $('.person').on('click', function() {
            location.href = 'userSeting.html';
        });


        function qsToJson(query) {
            let obj = {}
            let s1 = query.substring(1)
            let arr1 = s1.split('&') //[ 'a=11','b=22','c=33' ]
                // console.log(arr1)
            arr1.forEach(value => {
                let arr2 = value.split('=')
                obj[arr2[0]] = decodeURIComponent(arr2[1])
                    //obj[arr2[0]] = arr2[1]
            })
            return obj
        }
        // let data = qsToJson(location.search)
        // console.log(data, '地址栏的参数')
        // let keyword = '直播' //要搜索的关键字变量
        let {
            keyword
        } = qsToJson(location.search);
        console.log(keyword + '测试');

        (function() {
            $('#keyWord').val(keyword);
            console.log($('#keyword').val());
        })();


        //跳转到课程中心
        $('#coursesCenter').on('click', function() {
            location.href = 'course.html';
        });








        // //跳转到搜索列表以后回显搜索框数据
        // (function() {
        //     // var loc = location.href;
        //     // var index = loc.indexOf("=");
        //     // var content = loc.substring(index + 1);
        //     var loc = location.search;
        //     var content = loc.substring(loc.indexOf('=') + 1);
        //     console.log(content);
        //     //解码
        //     $('#content').val(decodeURI(content));
        //     let keyword = '直播' //要搜索的关键字变量
        //     keyword = $('#content').val();
        //     console.log(keyword);
        //     getSearchListByKeyword(keyword, page = 1);
        // })();




        //给搜索绑定点击事件
        $('#searchByKeyword').on('click', function() {
            keyword = $('#keyWord').val();
            getSearchListByKeyword(keyword, page = 1);
        });


        //事件的业务操作：分页 。后加到页面中的元素，必须用委托进行绑定事件（事件代理） 。
        $('#pageList').on('click', 'li,button', function() { //jquery事件委托写法
            let page = $(this).attr('page') //获取自定义属性的方法
            getSearchListByKeyword(keyword, page)
        });


        //获取按哪个关键字搜索得到 的课程列表，搜索可能会得到很多的数据，必然要做分页。
        async function getSearchListByKeyword(keyword, page = 1) {
            //就想搜索 标题中带 “直播” 的课程
            //let keyword = '直播'
            //1. 调用ajax
            // $('#keyword').val(keyword);
            let {
                err,
                result
            } = await myAjax({
                    url: '/api/search',
                    data: {
                        // keyword: $('#content').val(),
                        keyword,
                        page,
                        pageSize: 6
                    }
                })
                //2. 拼接课程列表字符串

            let str = ''

            result.result.data.forEach(course => {
                // let course = result.result.data[0]
                str += `
            <li>
                <a href="./videoDetail.html?id=${course.cid}">
                <div class="top">
                    <img src="${course.image_src}" alt="" class="m">
                    <p>学科：${course.subject_name}</p>
                </div>
                <div class="bottom">
                    <div class="left">
                        <span>${course.title}</span>
                        <span class="time">地区：${course.area_name}</span>
                    </div>
                    <div class="right">${course.price ? course.price + '元' : '免费'}</div>
                </div>
                </a>
            </li>
        `
            })

            let searchInfoStr = `搜索到 <span>${result.result.keyword}</span> 关键字共<span>${result.result.rows}</span> 条，共<span>${result.result.totalPage}</span>页,当前第<span>${result.result.page}</span>页`

            $('#kecheng').html(str)
            $('.search_keyword').html(searchInfoStr)

            //处理页码
            setPage(result.result.totalPage, result.result.page)
        }
        // getSearchListByKeyword(keyword = '', 1)
        getSearchListByKeyword(keyword, 1)

        //处理页码，但是这个函数得知道总页码
        function setPage(totalPage, page) {
            let prevPage = page - 0 - 1 == 0 ? 1 : page - 0 - 1 //上一页？
            let nextPage = page - 0 + 1 >= totalPage ? totalPage : page - 0 + 1 //下一页
            let str = `<button page="${prevPage}">上一页</button>`

            for (let i = 1; i <= totalPage; i++) {
                str += `<li page="${i}" class="${i==page ? 'active':''}">${i}</li>`
            }
            str += `<button page="${nextPage}">下一页</button>`
                // console.log( str )

            $('#pageList').html(str)
        }
    </script>

    <!-- <script>
        // //跳转到搜索列表以后回显搜索框数据
        // (function() {
        //     var loc = location.href;
        //     var index = loc.indexOf("=");
        //     var content = loc.substring(index + 1);
        //     //解码
        //     $('#content').val(decodeURI(content));
        // })();


        async function getSearchListByKeyword() {

            var loc = location.href;
            var index = loc.indexOf("=");
            var content = loc.substring(index + 1);
            console.log(loc);
            // console.log(content);
            // console.log(typeof content);
            //解码
            $('#content').val(decodeURI(content));
            //就想搜索 标题中带 “直播” 的课程
            // let keyword = decodeURI(content);
            let keyword = decodeURI(content) == $('#content').val() ? $('#content').val() : '';


            //1. 调用ajax
            let {
                err,
                result
            } = await myAjax({
                    url: '/api/search',
                    data: {
                        keyword,
                        // page: 2,
                        // pageSize: 6
                    }
                })
                //2. 拼接课程列表字符串

            let str = ''
            result.result.data.forEach(course => {
                // let course = result.result.data[0]
                str += `
                <li>
                    <div class="top">
                        <img src="${course.image_src}" alt="" class="m">
                        <p>学科：${course.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${course.title}</span>
                            <span class="time">地区：${course.area_name}</span>
                        </div>
                        <div class="right">${course.price ? course.price + '元' : '免费'}</div>
                    </div>
                </li>
            `
            })

            let searchInfoStr = `搜索到 <span>${result.result.keyword}</span> 关键字共<span>${result.result.rows}</span> 条，共<span>${result.result.totalPage}</span>页,当前第<span>${result.result.page}</span>页`

            $('#kecheng').html(str)
            $('.search_keyword').html(searchInfoStr);

            str = ``;
            for (let i = 0; i < result.result.totalPage; i++) {
                str += `<li class=${i==0? 'active':''}>${i+1}</li>`;
            }
            $('#pageList').html(str);

        }
        getSearchListByKeyword();




        //根据关键字搜索
        $('#searchByKeyword').on('click', function() {
            let content = $('#content').val();
            console.log(content);
            $.ajax({
                url: 'http://localhost:3000/api/search?pageSize=&page=&keyword=' + content,
                method: 'get',
                success(res) {
                    // console.log(res.result.data);
                    let str = ``;
                    res.result.data.forEach(function(item) {
                        // console.log(item);
                        str += `
                     <li>
                    <div class="top">
                        <img src="${item.image_src}" alt="" class="m">
                        <p>学科：${item.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${item.title}</span>
                            <span class="time">地区：${item.area_name}</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> 
                    `;
                    });
                    $('#kecheng').html(str);
                    let searchInfoStr = `搜索到 <span>${res.result.keyword}</span> 关键字共<span>${res.result.rows}</span> 条，共<span>${res.result.totalPage}</span>页,当前第<span>${res.result.page}</span>页`

                    $('.search_keyword').html(searchInfoStr);
                    str = ``;
                    for (let i = 0; i < res.result.totalPage; i++) {
                        str += `<li class=${i==0? 'active':''}>${i+1}</li>`;
                    }
                    $('#pageList').html(str);
                }
            });
        });



        // // //给分页添加绑定事件
        // let pageList = $('#pageList');
        // // console.log(pageList);

        // // console.log($('#pageList li').length);
        // pageList.on('click', 'li', function(ev) {
        //     $('#pageList li').removeClass('active');
        //     $(this).addClass('active');
        // });


        let keyword = '直播' //要搜索的关键字变量

        //事件的业务操作：分页 。后加到页面中的元素，必须用委托进行绑定事件（事件代理） 。
        $('#pageContainer').on('click', 'li,button', function() { //jquery事件委托写法
            // console.log('ok')
            // console.log($(this).html())
            // let page = $(this).html()
            let page = $(this).attr('page') //获取自定义属性的方法
                // console.log(page)
                // return
            getSearchListByKeyword(keyword, page)
        })
    </script> -->
    <!-- <script>
        //跳转到搜索列表以后回显搜索框数据
        (function() {
            var loc = location.href;
            var index = loc.indexOf("=");
            var content = loc.substring(index + 1);
            //解码
            $('#content').val(decodeURI(content));
        })();

        //根据关键字搜索
        $('#searchByKeyword').on('click', function() {
            let content = $('#content').val();
            console.log(content);
            $.ajax({
                url: 'http://localhost:3000/api/search?pageSize=&page=&keyword=' + content,
                method: 'get',
                success(res) {
                    console.log(res.result.data);
                    let str = ``;
                    res.result.data.forEach(function(item) {
                        // console.log(item);
                        str += `
                     <li>
                    <div class="top">
                        <img src="${item.image_src}" alt="" class="m">
                        <p>学科：${item.subject_name}</p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                            <span>${item.title}</span>
                            <span class="time">地区：${item.area_name}</span>
                        </div>
                        <div class="right">免费学习</div>
                    </div>
                </li> 
                    `;
                    });
                    $('#kecheng').html(str);


                    str = ``;
                    for (let i = 0; i < res.result.totalPage; i++) {
                        str += `<li class=${i==0? 'active':''}>${i+1}</li>`;
                    }
                    $('#pageList').html(str);
                }
            });
        });
    </script> -->
    <script src="../js/ujiuye.js"></script>
</body>

</html>